<template>
  <div>
    <Row class="header" type="flex" justify="start">
      <Col span="24">
        <Icon class="icon" type="ios-podium-outline"/>
        <span class="title">2月12日零时以来关注地区来沈人员情况</span>
      </Col>
    </Row>
    <br>
    <div id="focusArea" :style="{ width: width + 'px', height: height + 'px'}"></div>
  </div>
</template>

<script>
import echarts from 'echarts'
// import { findUserTypeStateArealist } from '@/api/yi-qing-fang-kong'
import mockData from './mockData'

export default {
  name: 'focusAreaEchart',
  data () {
    return {
      chartData: []
    }
  },
  props: {
    width: {
      type: Number,
      default: () => {
        return 500
      }
    },
    height: {
      type: Number,
      default: () => {
        return 300
      }
    }
  },
  mounted () {
    this.chart()
  },
  methods: {
    chart () {
      // findUserTypeStateArealist().then(ret => {
      if (mockData.data.errcode === 0) {
        this.chartData = mockData.data.data
        let option = {
          title: {
            text: ''
          },
          textStyle: {
            color: '#bababa'
          },
          legend: {
            // left: '20%',
            // itemHeight: 10,
            // padding: [0, 0, 10, 0]
          },
          tooltip: {
            trigger: 'axis',
            backgroundColor: 'rgba(50,50,50,0.6)',
            axisPointer: { // 坐标轴指示器，坐标轴触发有效
              type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
            }
          },
          dataset: {
            dimensions: ['area', 'totalP', 'dailyP', 'totalC', 'dailyC'],
            source: []
          },
          yAxis: {
            name: '单位：人',
            type: 'value',
            axisLine: {
              lineStyle: {
                color: '#bababa' // 轴及其文字颜色
              }
            }
          },
          xAxis: {
            type: 'category',
            axisLabel: {
              interval: 0,
              rotate: 30
            },
            axisLine: {
              lineStyle: {
                color: '#bababa' // 轴及其文字颜色
              }
            }
          },
          series: [
            {
              name: '总数（省）',
              type: 'bar',
              stack: '省',
              barGap: 0,
              label: {
                normal: {
                  show: true,
                  position: 'inside',
                  color: ['#fff'],
                  formatter: function (params) {
                    if (params.value.totalP > 0) {
                      return params.value.totalP
                    } else {
                      return ''
                    }
                  }
                }
              },
              itemStyle: {
                // 通常情况下：
                normal: {
                  color: ['#61A0A9']
                },
                // 鼠标悬停时：
                emphasis: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            },
            {
              name: '日增长（省）',
              type: 'bar',
              stack: '省',
              barGap: 0,
              label: {
                normal: {
                  show: true,
                  position: 'top',
                  // color: ['#fff'],
                  formatter: function (params) {
                    if (params.value.dailyP > 0) {
                      return `当日新增\n` + params.value.dailyP
                    } else {
                      return ''
                    }
                  }
                }
              },
              itemStyle: {
                // 通常情况下：
                normal: {
                  color: ['#C75258']
                },
                // 鼠标悬停时：
                emphasis: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            },
            {
              name: '总数（市）',
              type: 'bar',
              stack: '市',
              barGap: 0,
              label: {
                normal: {
                  show: true,
                  position: 'inside',
                  color: ['#fff'],
                  formatter: function (params) {
                    if (params.value.totalC > 0) {
                      return params.value.totalC
                    } else {
                      return ''
                    }
                  }
                }
              },
              itemStyle: {
                // 通常情况下：
                normal: {
                  color: ['#749E81']
                },
                // 鼠标悬停时：
                emphasis: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            },
            {
              name: '日增长（市）',
              type: 'bar',
              stack: '市',
              barGap: 0,
              label: {
                normal: {
                  show: true,
                  position: 'top',
                  // color: ['#fff'],
                  formatter: function (params) {
                    if (params.value.dailyC > 0) {
                      return `当日新增\n` + params.value.dailyC
                    } else {
                      return ''
                    }
                  }
                }
              },
              itemStyle: {
                // 通常情况下：
                normal: {
                  color: ['#EA7E53']
                },
                // 鼠标悬停时：
                emphasis: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        }
        this.chartData.forEach(item => {
          option.dataset.source.push(item)
        })
        let myChart = echarts.init(document.getElementById('focusArea'))
        myChart.setOption(option)
      } else {
        this.$Message.error({
          content: '数据获取失败,\n' + ret.data.errmsg
        })
      }
      // })
    }
  }
}
</script>

<style scoped>
  .header {
    height: 30px;
  }

  .icon {
    font-size: 28px;
    font-weight: 600;
    margin-right: 5px;
  }

  .title {
    font-size: 16px;
    font-weight: 600;
    line-height: 30px;
  }
</style>
